<template>
  <el-card class="container">
    <head>
      <meta name="referrer" content="no-referrer" />
    </head>
    <div class="header">
      <div class="text">
        <span>说明：目前支持学科和关键字条件筛选</span>
      </div>
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>
    <div id="form">
      <el-form
        ref="form"
        :model="formData"
        label-width="70px"
        :inline="true"
        size="small"
      >
        <el-form-item label="学科">
          <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            @change="onChange(formData.subjectID)"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级目录">
          <el-select v-model="formData.catalogID" placeholder="请选择">
            <el-option
              v-for="item in catalogList"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签">
          <el-select v-model="formData.tags" placeholder="请选择">
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" placeholder="根据题干搜索">
          <el-input v-model="formData.keyword"></el-input>
        </el-form-item>

        <el-form-item label="试题类型">
          <el-select v-model="formData.questionType" placeholder="请选择">
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="formData.difficulty" placeholder="请选择">
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向">
          <el-select v-model="formData.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :value="item"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item>

        <el-form-item label="录入人">
          <el-select v-model="formData.creatorID" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题目备选">
          <el-input v-model="formData.remarks"></el-input>
        </el-form-item>

        <el-form-item label="企业简称">
          <el-input v-model="formData.shortName"></el-input>
        </el-form-item>

        <el-form-item label="城市">
          <div class="d-flex flex-grow-1">
            <el-select
              v-model="formData.province"
              placeholder="请选择"
              @change="cityChange(formData.province)"
              style="width:39%"
            >
              <el-option
                v-for="item in cityList"
                :value="item"
                :key="item"
              ></el-option>
            </el-select>
            <el-select v-model="formData.city" placeholder="请选择" style="width:39%">
              <el-option
                v-for="item in areaList"
                :value="item"
                :key="item"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item  style="display:flex;justify-content:flex-end;">
          <div
            class="d-flex justify-content-end"
           style="margin-right:45px"
          >
            <el-button @click="clearForm">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <ChoiceTab
          :tableData="tableData"
          :page="page"
          @getFatherData="getFatherData"
        />
      </el-tab-pane>
      <el-tab-pane label="待审核" name="second">
        <ChoiceTab
          :tableData="tableData"
          :page="page"
          @getFatherData="getFatherData"
        />
      </el-tab-pane>
      <el-tab-pane label="已审核" name="third">
        <ChoiceTab
          :tableData="tableData"
          :page="page"
          @getFatherData="getFatherData"
        />
      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth">
        <ChoiceTab
          :tableData="tableData"
          :page="page"
          @getFatherData="getFatherData"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import * as Constants from "@/api/hmmm/constants";
import { cityList, citys } from "@/api/hmmm/citys";
import { choice } from "@/api/hmmm/questions";
import ChoiceTab from "../components/questions-choice-tab.vue";
import * as directorys from "@/api/hmmm/directorys";
import * as tags from "@/api/hmmm/tags";
import * as subjects from "@/api/hmmm/subjects";
import * as users from "@/api/base/users";
export default {
  name: "QuestionsChoice",
  filters: {
    filtype(val) {
      const f = Constants.questionType.find(item => {
        item.value === val;
        return item;
      });
      return f.label;
    },
    fildifficulty(val) {
      const f = Constants.difficulty.find(item => {
        item.value === val;
        return item;
      });
      return f.label;
    }
  },
  components: {
    ChoiceTab
  },
  data() {
    return {
      formData: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: "",
        questionType: "",
        catalogID: undefined,
        creatorID: undefined,
        difficulty: "",
        direction: "",
        remarks: "",
        shortName: "",
        city: "",
        province: ""
      },
      activeName: "first",
      tableData: [],
      questionType: [],
      difficulty: [],
      direction: [],
      subjectList: [],
      catalogList: [],
      tagsList: [],
      userList: [],
      cityList,
      areaList: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 10
      }
    };
  },
  methods: {
    // deleteRow(index, rows) {
    //   rows.splice(index, 1);
    // },
    getFatherData() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },
    async handleClick(tab, event) {
      console.log(tab);

      if (tab.index === "0") {
        this.getTableData();
      } else {
        const { data: res } = await choice({ chkState: tab.index - 0 });
        // console.log(tab, event);
        this.tableData = res.items;
        this.page.total = res.counts;
      }
    },
    clearForm() {
      this.formData = this.$options.data().formData;
    },

    async getTableData(val) {
      const { data: res } = await choice({ ...this.page, ...val });

      this.page.total = res.counts;
      this.tableData = res.items;
      console.log(res.items);
    },
    getData(data) {
      console.log(data);

      this.tableData = data;
    },
    async getSubjectList() {
      const { data } = await subjects.simple();

      this.subjectList = data;
    },
    search() {
      this.getTableData(this.formData);
      // this.formData = this.$options.data().formData;
    },
    cityChange(val) {
      this.areaList = citys(val);
    },
    async getUserList() {
      let data = await users.simple();
      this.userList = data.data;
    },
    async onChange(subjectID) {
      let subItem = this.subjectList.find(item => {
        if (item.label === subjectID) {
          return item;
        }
      });
      console.log(subItem);

      let res = await directorys.simple({
        subjectID: subItem.value
      });
      let res1 = await tags.simple({
        subjectID: subItem.value
      });
      this.catalogList = res.data;
      this.tagsList = res1.data;
    }
  },
  mounted() {
    this.getUserList();
    this.getTableData();
    this.getSubjectList();
    this.questionType = Constants.questionType;
    this.difficulty = Constants.difficulty;
    this.direction = Constants.direction;
  }
};
</script>

<style scoped lang='less'>
.container {
  margin: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    span {
      font-size: 8px;
      color: #ffc5cb;
    }
  }

  .footer {
    display: flex;
    justify-content: end;
  }
  .el-pagination {
    margin-top: 15px;
  }

  .d-flex {
    display: flex;
  }
  // .flex-grow-1 {
  //   flex-grow: 1;
  // }
  .justify-content-end {
    justify-content: flex-end;
  }

  .d-flex > .el-select:not(:last-child) {
    margin-right: 10px;
  }

  .el-form {
    display: flex;
    flex-wrap: wrap;
  }

  .el-form-item__label {
    font-weight: bold;
  }

  .el-select {
    width: 100%;
  }

  .el-form--inline .el-form-item {
    display: flex;
    flex: 25%;
    margin-right: 0px;
  }

  .el-input__inner {
    width: 100%;
    padding: 0 30px;
  }

  .el-form-item__content {
    flex: 1;
  }
  .el-select {
    width: 92% ;
  }
}
</style>
